<template>
  <div>
    <h4><i class="el-icon-setting"></i>  打印设置</h4>
        <div class='format'>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="纸张尺寸">
                <el-select v-model="form.size" placeholder="请选择打印尺寸">
                  <el-option label="A4" value="A4"></el-option>
                  <el-option label="A3" value="A3"></el-option>
                  <el-option label="A5" value="A5"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="纸张类型">
                <el-select v-model="form.type" placeholder="请选择纸张类型">
                  <el-option label="普通纸" value="plain"></el-option>
                  <el-option label="照片纸" value="picture"></el-option>
                  <el-option label="再生纸" value="recycled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="双面打印">
                <el-switch v-model="form.depulx"></el-switch>
              </el-form-item>
              <el-form-item label="纸张来源">
                <el-radio-group v-model="form.tray">
                  <el-radio label="纸盒1"></el-radio>
                  <el-radio label="纸盒2"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="纸张方向">
                <el-radio-group v-model="form.direction">
                  <el-radio label="长边"></el-radio>
                  <el-radio label="短边"></el-radio>
                </el-radio-group>
              </el-form-item>
                <el-button type="primary" @click="onSubmit">立即设定</el-button>
            </el-form>
        </div>
        <h4><i class="el-icon-printer"></i>  打印文件</h4>
        <div class="format">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="fileUpload">开始打印</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/pdf文件，且不超过500kb</div>
            </el-upload>
        </div>
  </div>
</template>

<script>
import { getParameter, setParameter, startPrint } from '../utils/api'

export default {
  name: 'Print',
  data () {
    return {
      form: {
        size: '',
        type: '',
        depulx: false,
        tray: '',
        direction: ''
      },
      fileList: []
    }
  },
  methods: {
    async onLoad () {
      console.log('Print : onLoad')
      try {
        let response = await getParameter()
        console.log(response.status)
        if (response.status === 200) {
          console.log(response.data)
          this.form = response.data.data
        }
      } catch (error) {
        this.$message({
          type: 'error',
          message: '取得打印机设定参数失败 : ' + error
        })
      }
    },
    async onSubmit () {
      console.log('submit!')
      console.log(this.form)
      try {
        let response = await setParameter(this.form)
        this.$message({
          type: 'success',
          message: response.data.data
        })
      } catch (error) {
        this.$message({
          type: 'error',
          message: '设定失败 : ' + error
        })
      }
    },
    fileUpload () {
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择文件 !!! '
        })
      } else {
        this.$confirm('可以开始打印？', '打印确认', {
          distinguishCancelAndClose: true,
          confirmButtonText: '开始打印',
          cancelButtonText: '取消打印',
          type: 'info'
        }).then(async () => {
          while (this.fileList.length !== 0) {
            let data = new FormData()
            data.append('file', this.fileList.shift().raw)
            try {
              let response = await startPrint(data)
              if (response.status === 200) {
                this.$message({
                  type: 'success',
                  message: response.data.data
                })
              }
            } catch (error) {
              this.$message({
                type: 'error',
                message: '打印失败 : ' + error
              })
            }
          }
        }).catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '已经取消打印'
              : action
          })
        })
      }
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    handlePreview (file) {
      console.log('handlePreview')
      console.log(file)
    },
    handleChange (file, fileList) {
      console.log(fileList)
      this.fileList = fileList
    }
  },
  mounted () {
    console.log('mounted : Print')
    this.onLoad()
  }
}
</script>

<style scoped>
.format {
  padding-top: 20px;
  padding-left: 40px;
  padding-bottom: 20px;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  box-shadow: 0 2px 30px 0 #DCDFE6;
}
</style>
